<template>
  <div class="app-container">
    <!-- 医院信息 -->
    <h5 class="titleInfo">医院信息</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="医院名称">
            <span class="spanToInput">{{list.hospitalName | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核状态">{{list.paidStatus}}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="付款单号">
            <span class="spanToInput">{{list.paymentSn | filterNull}}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="回款比率">
            <span class="spanToInput">{{list.paidRatio | filterNull}}</span>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="回款总金额">
            <span class="spanToInput">{{list.amount | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应付款金额">
            <span class="spanToInput">{{list.paidAmount | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款卡号">
            <span class="spanToInput">{{list.paidCard | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="户名">
            <span class="spanToInput">{{list.paidAccount | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款凭证">
            <div v-if="list.images">
              <el-popover
                placement="right"
                trigger="click"
                v-for="(item,index) in list.images"
                :key="index"
              >
                <img :src="'https://img.yuepinyuemei.com/' + item" style="width:100%;" />
                <img
                  slot="reference"
                  class="payimage"
                  :src="'https://img.yuepinyuemei.com/' + item"
                  :key="index"
                  alt
                />
              </el-popover>
            </div>
            <span v-else class="spanToInput">暂无</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 回款单信息 -->
    <div class="divBar"></div>
    <h5 class="titleInfo">回款单信息</h5>
    <div style="margin:0 20px 20px">
      <el-table :data="tableData" style="width: 100%" show-summary :summary-method="getSummaries">
        <el-table-column type="index" label="序号" align="center"></el-table-column>

        <el-table-column prop="repaymentSn" label="回款单号"></el-table-column>

        <el-table-column prop="userName" label="客户姓名"></el-table-column>
        <el-table-column prop="userPhone" label="客户手机号"></el-table-column>
        <el-table-column prop="consultantName" label="咨询师姓名"></el-table-column>

        <el-table-column prop="receivableAmount" label="应回款金额"></el-table-column>
        <el-table-column prop="receivedAmount" label="已回款金额"></el-table-column>
        <el-table-column prop="reviewAmount" label="审批中回款金额"></el-table-column>
        <el-table-column prop="surplusReceivableAmount" label="剩余回款金额"></el-table-column>
        <el-table-column prop="currentAmount" label="本次回款金额"></el-table-column>
        <el-table-column prop="paidRatio" label="回款比例">
          <template slot-scope="scope">
            <div v-if="scope.row.paidRatio">{{scope.row.paidRatio}}%</div>
          </template>
        </el-table-column>
        <el-table-column prop="paidAmount" label="应付款金额"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { payinfoList } from "@/api/hospitalCheck";
export default {
  data() {
    return {
      tableData: [],
      userId: "",
      list: {},
    };
  },
  filters: {
    filterNull(e) {
      if (!e) {
        return "暂无";
      } else {
        return e;
      }
    },
  },
  created() {
    this.userId = String(this.$route.query.userId);
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      let datas = { id: this.userId };
      payinfoList(datas)
        .then((res) => {
          console.log(res);
          if (!res.data.code) {
            this.list = res.data.data;
            this.tableData = res.data.data.responseDTOS;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    // 累加
    sum(arr) {
      console.log(arr);
      return eval(arr.join("+"));
    },
    // table表数据合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let amounts;
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        let currentAmount = 0.0;
        let paidAmount = 0.0;
        data.map((res) => {
          currentAmount += res.currentAmount - 0;
          paidAmount += res.paidAmount - 0;
        });
        switch (column.property) {
          case "currentAmount":
            sums[index] = currentAmount.toFixed(2);
            break;
          case "paidAmount":
            sums[index] = paidAmount.toFixed(2);
            break;
          default:
            break;
        }
      });
      return sums;
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.payimage {
  display: inline-block;
  width: 200px;
  height: auto;
  margin-right: 20px;
}
</style>
